<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>千锋&美团大数据平台</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
</head>

<body>
   

    <!-- 头 -->
    <header>
        <h1>千锋&美团大数据平台</h1>
        <span></span>
    </header>
    <!-- 头 -->

    <!-- 内容 -->
    <section class="main">
        <div class="column">
            <div class="box box-l1" style="height:4.5rem">
            </div>
            <div class="box box-l2" style="height:2.6rem">
            <div class="title"><span>单号</span><span>品名</span><span>金额</span><span>时间</span></div>
            <div class="myscroll">
                <ul>
                    <li><span>10008623</span><span>手机</span><span>$499</span><span>6小时</span></li>
                    <li><span>10008623</span><span>手机</span><span>$599</span><span>6小时</span></li>
                    <li><span>10008627</span><span>手机</span><span>$799</span><span>1小时</span></li>
                    <li><span>10008627</span><span>手机</span><span>$199</span><span>8小时</span></li>
                    <li><span>10002387</span><span>手机</span><span>$299</span><span>8小时</span></li>
                    <li><span>10002387</span><span>手机</span><span>$899</span><span>5小时</span></li>
                    <li><span>10862387</span><span>手机</span><span>$399</span><span>7小时</span></li>
                    <li><span>10862387</span><span>手机</span><span>$199</span><span>9小时</span></li>
                    <li><span>10862387</span><span>手机</span><span>$099</span><span>5小时</span></li>
                    <li><span>10082387</span><span>手机</span><span>$199</span><span>9小时</span></li>
                </ul>
            </div>
            
            </div>
            <div class="box box-l3" style="height:2.6rem"></div>
        </div>
        <div class="column">
            <div class="box box-m1" style="height:2.3rem">
           <div style="display: inline-block;height:2.3rem;margin:0.7rem 0 0 0.2rem ;"><span style="font-size: 0.8rem; color: yellow;font-weight: bold;">48352862</span></div>
        <div class="y1" style="width:1.4rem;height:1.7rem"></div>
        <div class="y2" style="width:1.4rem;height:1.7rem"></div>
        <div class="y3" style="width:1.4rem;height:1.7rem"></div>
            </div>
            <div class="box box-m2" style="height:3.8rem"></div>
            <div class="box box-m3" style="height:3.6rem"></div>
        </div>
        <div class="column">
            <div class="box box-r1" style="height:3.2rem">
                <div>
            <h1>标题样式</h1>
            <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr class="tr1">
                        <th scope="col">排名</th>
                        <th scope="col">公司</th>
                        <th scope="col">数量</th>
                        <th scope="col">增长率</th>
                    </tr>
                    <tr class="tr2">
                        <td><span class="s1">1</span></td>
                        <td>腾讯科技</td>
                        <td>114万<br></td>
                        <td>100%<br></td>
                    </tr>
                    <tr class="tr3">
                        <td><span class="s2">2</span></td>
                        <td>百度公司</td>
                        <td>92382万</td>
                        <td>21%</td>
                    </tr>
                    <tr class="tr4">
                        <td><span class="s3">3</span></td>
                        <td>新浪</td>
                        <td>124053万</td>
                        <td>12%</td>
                    </tr>
                    <tr class="tr5">
                        <td><span class="s4">4</span></td>
                        <td>网易</td>
                        <td>1.2亿</td>
                        <td>39%</td>
                    </tr>
                    <tr class="tr6">
                        <td><span class="s5">5</span></td>
                        <td>雅虎</td>
                        <td>18423万</td>
                        <td>9%</td>
                    </tr>
                </tbody>
            </table>
            </div>
            </div>
            <div class="box box-r2" style="height:3.1rem">
            <div>
                <h1>标题样式</h1>
                <table class="table1" width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr class="tr1">
                            <th scope="col">排名</th>
                            <th scope="col">公司</th>
                            <th scope="col">数量</th>
                            <th scope="col">增长率</th>
                        </tr>
                        <tr class="tr2">
                            <td><span class="s1">1</span></td>
                            <td>腾讯科技</td>
                            <td>114万<br></td>
                            <td>100%<br></td>
                        </tr>
                        <tr class="tr3">
                            <td><span class="s2">2</span></td>
                            <td>百度公司</td>
                            <td>92382万</td>
                            <td>21%</td>
                        </tr>
                        <tr class="tr4">
                            <td><span class="s3">3</span></td>
                            <td>新浪</td>
                            <td>124053万</td>
                            <td>12%</td>
                        </tr>
                        <tr class="tr5">
                            <td><span class="s4">4</span></td>
                            <td>网易</td>
                            <td>1.2亿</td>
                            <td>39%</td>
                        </tr>
                        <tr class="tr6">
                            <td><span class="s5">5</span></td>
                            <td>雅虎</td>
                            <td>18423万</td>
                            <td>9%</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            </div>
            <div class="box box-r3" style="height:3.4rem"></div>
        </div>
    </section>
    <!-- 内容 -->

    <script src="./assets/js/flexible.js"></script>
    <script src="http://unpkg.com/jquery"></script>
    <script src="https://unpkg.com/webopenfather-date@1.0.1/dist/wofDate.js"></script>
    <script src="http://unpkg.com/echarts"></script>
    <script src="./assets/js/left1.js"></script>
    <script src="./assets/js/left3.js"></script>
    <script src="./assets/js/m11.js"></script>
    <script src="./assets/js/m12.js"></script>
     <script src="./assets/js/m13.js"></script> 
    <script src="./assets/js/m2.js"></script>
    <script src="./assets/js/m3.js"></script>
    <script src="./assets/js/right3.js"></script>
    <script>

        setInterval(() => {
            $('header span').html(wofDate.format('Y年m月d日H时i分s秒'))
        }, 1000)
    </script>
</body>

</html>